<template>
  <div class="user-avatar-dropdown">
    <Dropdown @on-click="handleClick">
	    <span>{{ userName }}</span>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="logout" >
            <common-icon :size='16' type="_tuichudenglu"/>
            退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import "./user.less";
import { mapActions } from "vuex";
import { getUserName } from '@/libs/util'
import commonIcon from "@/components/common-icon/common-icon"
export default {
  name: "User",
  showAlert: false,
  computed:{
    userName(){
      return getUserName() 
    }
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    logout() {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login"
        });
      });
    },
    handleClick(name) {
      switch (name) {
        case "logout":
          if (this.showAlert)break;
            this.$confirm({
                headTitle:"系统提示",
                tip:"确定退出当前登录吗？"
            }).then(() => {
                // 清空本地存储中记录的已打开页面的tags，重新登录用户时只打开home的页面
                let arr = JSON.parse(window.localStorage.getItem("tagNaveList"));
                let newArr = [];
                newArr.push(arr[0]);
                window.localStorage.setItem('tagNaveList',JSON.stringify(newArr));
                this.showAlert=false;
                this.logout();
            })
            .catch(() => {
                this.showAlert=false;
            })
            this.showAlert=true;
          break;
      }
    }
  },
  components:{
      commonIcon
  }
};
</script>
